<template>
    <div class="components header">
      <div class="head">
        <span class="back" @click="back" v-if="showBack"></span>
        <span class="title" v-text="title">title</span>
        <span class="more" v-if="showMore"></span>
      </div>
    </div>
</template>
<script>
  export default {
    name: 'heads',
    props: {
      value: {
        type: Boolean,
        default: false
      },
      showBack: Boolean,
      showMore: Boolean,
      title:String
    },
    methods: {
      back(){
        this.$router.go(-1);
      }
    }
  }
</script>
<style lang='less'>
  .header{
    margin: 10px 0;
    cursor: pointer;
    -webkit-user-select:none; 
    -webkit-touch-callout:none;
  }
  .head{
    width: 100%;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    .title{
      flex: 1;
      text-align: center;
      font-size: 20px;
      font-weight: 400;
    }
    .back{
      width: 25px;
      height: 30px;
      background: url(../assets/back.png) no-repeat;
      display: inline-block;
      background-size: contain;
      cursor: pointer;
    }
    .more{
      width: 25px;
      height: 30px;
      background: url(../assets/more.png) no-repeat;
      display: inline-block;
      background-size: contain;
      cursor: pointer;
    }
  }
</style>

